import React, { memo, useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { ToolboxComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import './style.less';

echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

export default memo(function MyPieEchart(props) {
  const chartRef = useRef();
  useEffect(() => {
    const myChart = echarts.init(chartRef.current);
    const dataList = [];
    let i = 0;
    if (props.dataList[0]) {
      for (let item of props.dataList) {
        dataList[i] = { name: item.name, value: item.goodsCount };
        i++;
      }
    }
    const option = {
      legend: {
        top: 'bottom',
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [0, 160],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8,
          },
          data: dataList,
        },
      ],
    };
    myChart.setOption(option);
  }, [props]);

  return <div className="my-pie-echart" ref={chartRef}></div>;
});
